{% load cache %}
{% load static %}
{% load i18n %}
{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GeekVPN</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    {% compress css %}
    <link href="{% static "GeekVPN/css/bootstrap.css"  %}" rel="stylesheet" media="screen">
    <link href="{% static "GeekVPN/css/bootstrap-theme.css"  %}" rel="stylesheet" media="screen">
<style type="text/css" >

    body {
{#    background-color: #EEEEEE;#}
    padding-bottom: 40px;
    padding-top: 40px;
    }
    .navbar{
    min-height: 35px;
    }

    .navbar-brand , .navbar-nav > li > a{
    padding-bottom: 7px;
    padding-top: 7px;
    }

    .form-signin {
    margin: 0 auto;
    max-width: 330px;
    padding: 15px;
}

{#    input {margin-top: 3px; margin-bottom: 3px;}#}
    .tab-pane{padding-top: 10px; padding-bottom: 10px;}

</style>
    {% endcompress %}
{#    <link href="{% static "GeekVPN/css/flat-ui.css"  %}" rel="stylesheet" media="screen">#}


{#    <meta http-equiv="X-UA-Compatible" content="IE=edge">#}

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    {% compress js %}
      <script src="{% static "GeekVPN/ie/html5shiv.js"  %}"></script>
      <script src="{% static "GeekVPN/ie/respond.min.js"  %}"></script>
    {% endcompress %}
    <![endif]-->




  </head>
<body>
    <!--[if lt IE 8]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->


<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">GeekLien ToolBox</a>
        </div>


    </div>
</div>




<div class="container">
    <div class="row form-signin">










<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#SignIn" data-toggle="tab" >{% trans "Sign In"%}</a></li>
<li><a href="#SignUp" data-toggle="tab">{% trans "Sign Up" %}</a></li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="SignIn">
            <form action="{% url 'geek-vpn-sign-in' %}" method="POST"  id="sign-in-form">
        {% for field in sif %}
            <div class="form-group">{{ field }}</div>
        {% endfor %}
        <label class="checkbox">
          <input type="checkbox" value="remember" name="remember"> {% trans "Remember me" %}
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit" id="sign-in-button">{% trans "Sign In !"%}</button>
      </form>
       <p class="pull-right"><br/><a href="#resetpassword" data-toggle="modal" data-target="#resetpassword" data-backdrop="static"  >{% trans "Forgot your password?"%}</a></p>
{#  <a href="/GeekVPN/ajax/get/findpassword/" data-target="#resetpassword" data-toggle="modal">Edit 1</a>#}





  </div>
  <div class="tab-pane" id="SignUp">
        <form action="{% url 'geek-vpn-sign-up' %}" method="POST"  id="sign-up-form">
            {% for field in suf %}
            <div class="form-group">{{ field }}</div>
            {% endfor %}
        <button class="btn btn-lg btn-primary btn-block" type="submit">{% trans "Sign Up !" %}</button>
      </form>



  </div>

</div>




    </div> <!-- /row -->
</div> <!-- /container -->


<!-- Modal -->
<div class="modal fade" id="resetpassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">{% trans "Reset Password" %}</h4>
      </div>
      <div class="modal-body">
       <div class="tab-pane form-signin">
        <form action="{% url 'geek-vpn-reset-password' %}" method="post" id="reset-password-form">
            {% for field in rpf %}
                <div class="form-group">{{ field }}</div>
            {% endfor %}
        <button class="btn btn-lg btn-primary btn-block" type="submit">{% trans "Send New Password !" %} </button>
      </form>



        </div>
      </div>
{#        <div class='modal-body'></div>#}
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->






</body>
{% compress js %}
<script src="{% static "GeekVPN/js/jquery-1.10.2.min.js"  %}"></script>
<script src="{% static "GeekVPN/js/bootstrap.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.validate.min.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.validate.messages_zh.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.cookie-1.4.0.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.form-3.25.0.js"  %}"></script>


<script type="text/javascript">

//
//初始化Jquery支持Django跨站


var csrftoken = $.cookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
            // Send the token to same-origin, relative URLs only.
            // Send the token only if the method warrants CSRF protection
            // Using the CSRFToken value acquired earlier
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});


</script>

<script type="text/javascript">

    //Sign-UP 认证

    $(document).ready(function(){

        $('#sign-up-form').validate(
        {
            rules: {
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "{% url 'geek-vpn-validation-email' %}",
                        type: "post"
                    }
                },
                username: {
                    required: true,
                    minlength : 8,
                    maxlength : 20,
                    remote: {
                        url: "{% url 'geek-vpn-validation-username' %}",
                        type: "post"
                    }
                },
                password_first : {
                    minlength : 8
                },
                password_again : {
                    equalTo : "#id_password_first",
                    minlength : 8

                },
                first_name : {
                    required : true
                },
                last_name : {
                    required : true

                }
            },

            errorElement: 'span',
            errorClass:'help-block',
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready


</script>


<script type="text/javascript">

    //Sign-UP 认证

    $(document).ready(function(){

        $('#reset-password-form').validate(
        {
            rules: {
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "{% url 'geek-vpn-validation-email-for-reset-password' %}",
                        type: "post"
                    }
                }
            },

            errorElement: 'span',
            errorClass:'help-block',
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready


</script>


<script type="text/javascript">
//  Ajax提交
$(document).ready(function() {
    $('#sign-in-form').ajaxForm({
        dataType:  'json',
        success:    function(data) {
            location.reload();
        }
    });
});
</script>


<script type="text/javascript">
//  Ajax提交
$(document).ready(function() {
    $('#sign-up-form').ajaxForm({
        dataType:  'json',
        success:    function(data) {
            location.reload();
        }
    });
});
</script>


<script type="text/javascript">
//  Ajax提交
$(document).ready(function() {
    $('#reset-password-form').ajaxForm({
        dataType:  'json',
        success:    function(data) {
            location.reload();
        }
    });
});
</script>



{% endcompress %}
</html>